import { Button, Form, Input, Table, message } from 'antd';
import React, { useEffect, useState } from 'react';


//*样式
import "../../../scss/zw/FinanceForm.scss"
//*图标
import { SearchOutlined } from "@ant-design/icons"
//*请求
import { FinanceForm_list, FinanceForm_Search } from "../../../tools/api"
function FinanceForm(props) {
    //*定义表单数据
    var [marketformTablelist, setMarketformTablelist] = useState([])
    //*定义分页
    const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 })

    //*生命周期
    useEffect(() => {
        FinanceForm_list().then((res) => {
            // console.log(res.data);
            setMarketformTablelist(res.data)
        })
    }, [])

    //*搜索
    const onSearch = (value) => {
        console.log(value);

        FinanceForm_Search(value).then((res) => {
            setMarketformTablelist(res.data)
            console.log(res.data)
            // update()
        })
    }

    //*定义表头数据
    const columns = [
        {
            title: '制单时间',
            dataIndex: 'maketime',
            key: 'maketime',
        },
        {
            title: '单据编号',
            dataIndex: 'number',
            key: 'number',
        },
        {
            title: '业务类型',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '销售金额（元）',
            dataIndex: 'salesAmount',
            key: 'salesAmount',
        },
        {
            title: '优惠金额（元）',
            dataIndex: 'discountAmount',
            key: 'discountAmount',
        },
        {
            title: '附加金额（元）',
            dataIndex: 'shopwarehouse',
            key: 'address',
        },
        {
            title: '应收金额（元）',
            dataIndex: 'additionalAmount',
            key: 'address',
        },
        {
            title: '已收金额（元）',
            dataIndex: 'receivedAmount',
            key: 'receivedAmount',
        },
        {
            title: '应收款余额（元）',
            dataIndex: 'receivables',
            key: 'address',
        },
        {
            title: '备注',
            dataIndex: 'notes',
            key: 'notes',
        }

    ];
    //*分页时触发的事件
    var onChange = (pagination) => {
        setPagination(pagination)

    }

    return (
        <div className='marketform'>
            <div className="marketformHeader">
                数据报表/财务报表
            </div>
            {/* <div className="out">
                <Button type="primary" htmlType="submit" href="http://localhost:4000/">导出</Button>
            </div> */}
            <div className="marketformSearch">
                <div className="marketformSearch_form">
                    <Form
                        onFinish={onSearch}
                        className="search"
                    >
                        <Form.Item
                            className="formItem"
                            name='number'
                            label="单据编号"
                            rules={[{ message: '请输入单据编号' }]}
                        >
                            <Input placeholder="请输入单据编号" />
                        </Form.Item>
                        <Form.Item className="formItem" >
                            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>搜索</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
            <div className="marketformTable">
                <Table columns={columns} dataSource={marketformTablelist} onChange={onChange} pagination={pagination}  />
            </div>
        </div>
    );
}
export default FinanceForm;